<template>
    <div>
        <el-upload
            action="http://localhost:3030/order/import/excel/"
            :on-success="handleImportSuccess"
            :on-error="handleImportError"
            :headers="myHeaders"
            style="height: 50px;"
        >
        <el-button type="success" :icon="Upload" >导入订单</el-button>
        <el-button type="primary" :icon="Upload" >导出订单</el-button>
        </el-upload>
        <el-button type="primary" :icon="CirclePlusFilled" @click="addOrder.dialog = true">创建订单</el-button>
        <el-button type="info" :icon="Grid" @click="getOrders">全部订单</el-button>
        <el-radio-group v-model="radioFee" style="float: right;" @change="payStatus" v-if="$store.state.user.role === 'ROLE_ADMIN'">
            <el-radio :label="true" border>已缴费</el-radio>
            <el-radio :label="false" border>未缴费</el-radio>   
        </el-radio-group>
        <el-divider></el-divider>
        <el-dialog :append-to-body="true" draggable v-model="addOrder.dialog" title="创建订单" width="20%">
            <el-form :model="addOrder" label-width="70px">
                <el-form-item label="门店名称">
                    <el-select v-model="addOrder.storeId" placeholder="选择需要缴费的门店">
                    <el-option v-for="store in stores" 
                        :label="store.name"
                        :key="store.id" :value="store.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="物业费">
                    <el-input-number v-model="addOrder.propertyFees"></el-input-number>
                </el-form-item>
                <el-form-item label="租聘费">
                    <el-input-number v-model="addOrder.hireFees"></el-input-number>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addOrder.dialog = false">关闭</el-button>
                    <el-button type="primary" @click="addOrderTo">添加</el-button>
                </span>
            </template>
        </el-dialog>
        <el-table border stripe :data="orders" height="430px" style="width: 100%;margin-top: 10px;" 
            :header-cell-style="{'background':'#b1b3b8','text-align':'center','color':'white'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column type="selection" width="60" /> 
            <el-table-column prop="orderNumber" label="订单编号" width="100"/>
            <el-table-column prop="storeName" label="门店名称" width="150"/>
            <el-table-column prop="propertyFees" label="物业费" width="100"/>
            <el-table-column prop="hireFees" label="租聘费" width="100"/>
            <el-table-column prop="allFees" label="总额" width="100"/>
            <el-table-column prop="createTime" label="创建时间" width="150"/>
            <el-table-column label="订单状态" width="120" sortable sort-by="status">
                <template #default="scope">
                    <el-switch
                        v-model="scope.row.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        active-text="已支付"
                        inactive-text="未支付"
                        inline-prompt
                        disabled
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" :disabled="scope.row.status === true" :icon="Promotion" @click="OrderPay(scope.row)">支付</el-button>
                    <el-button type="warning" :icon="Edit" @click="EditOrder(scope.row)" v-if="$store.state.user.role === 'ROLE_ADMIN'" >编辑</el-button>
                    <el-dialog :append-to-body="true" draggable v-model="scope.row.EditDialog" title="编辑订单" width="20%">
                        <el-form :model="editOrder" label-width="70px">
                            <el-form-item label="门店名称">
                                <el-select v-model="editOrder.storeId" placeholder="选择需要缴费的门店">
                                <el-option v-for="store in stores" 
                                    :label="store.name"
                                    :key="store.id" :value="store.id"
                                />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="物业费">
                                <el-input-number v-model="editOrder.propertyFees"></el-input-number>
                            </el-form-item>
                            <el-form-item label="租聘费">
                                <el-input-number v-model="editOrder.hireFees"></el-input-number>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="scope.row.EditDialog = false">关闭</el-button>
                                <el-button type="primary" @click="updateOrder">修改</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <el-popconfirm
                        width="220"
                        confirm-button-text="确认"
                        cancel-button-text="我再想想"
                        cancel-button-type="info"
                        :icon="InfoFilled"
                        icon-color="red"
                        title="你确定删除吗?"
                        @confirm="deleteOrder(scope.row)"
                    >
                        <template #reference>
                            <el-button :disabled="$store.state.user.role !== 'ROLE_ADMIN'" type="danger" :icon="Delete">删除</el-button>
                        </template>
                 </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import {ref,reactive} from 'vue'
    import {useStore} from 'vuex'
    import {Edit,Delete,InfoFilled,Promotion,CirclePlusFilled,Upload,Grid} from '@element-plus/icons-vue'
    import request from '@/utils/request'
    import { ElMessage} from 'element-plus'
    export default{
        name:'PayInfo',
        components:{},
        setup() {
            let orders = ref([]);
            const icon = {Edit,Delete,InfoFilled,Promotion,CirclePlusFilled,Upload,Grid}
            const store = useStore()
            let radioFee = ref(1)
            let stores = ref([])
            let addOrder = reactive({
                propertyFees:0,hireFees:0,
                storeId:'',dialog:false,
            })
            let editOrder = ref({})
             //导入
            const handleImportSuccess = () => {
              ElMessage.success('导入成功')
              getOrders()
            }
            const handleImportError = () => {
              ElMessage.error('导入失败')
              getOrders()
            }
            const myHeaders = ref({
              Authorization:"Bearer "+store.state.user.token
            })
            let updateOrder = () => {
                request({
                    url:"/order/update/",
                    method:"post",
                    data:{
                        orderId:editOrder.value.orderId,
                        storeId:editOrder.value.storeId,
                        propertyFees:editOrder.value.propertyFees,
                        hireFees:editOrder.value.hireFees,
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    if(resp.message === 'success'){
                        ElMessage.success('订单修改成功！') 
                        getOrders()
                        editOrder.value.EditDialog = false
                    }
                }).catch(() => {});
            }
            let deleteOrder = (order) => {
                request({
                    url:"/order/delete/",
                    method:"post",
                    data:{
                        orderId:order.orderId
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    if(resp.message === 'success'){
                        ElMessage.success('订单删除成功！') 
                        getOrders()
                    }
                }).catch(() => {});
            }
            let addOrderTo = () => {
                request({
                    url:'/order/add/',
                    method:'post',
                    data:{
                        ...addOrder
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    if(resp.message === 'success'){
                        ElMessage.success('订单创建成功！')
                        getOrders()
                        addOrder.dialog = false
                    }
                }).catch(() => {});
            }
            let EditOrder = (order) => {
                order.EditDialog = true,
                editOrder.value = order
            }
            let getOrders = () => {
                request({
                    url:'/order/getAll/',                                                                                                                                                                                                   
                    method:'get',
                    params:{
                        username:store.state.user.username,
                        role:store.state.user.role
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    for (const order of resp) {
                        order.EditDialog = false
                    }
                    orders.value = resp
                }).catch(() => {});
            }
            getOrders()
            let getStoreAll = () => {
                request({
                    url:"/store/getAll/",
                    method:'get',
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    stores.value = resp
                }).catch(() => {});
            }
            getStoreAll()
            let OrderPay = (order) => {
                window.open("http://localhost:3030/alipay/pay?subject=" + order.storeName + "&traceNo=" + order.orderNumber + "&totalAmount=" + order.allFees)
            }
            let payStatus = () => {
                request({
                    url:"/order/getByStatus/",
                    method:"get",
                    params:{
                        status:radioFee.value,
                    },
                    headers:{
                        Authorization:"Bearer "+store.state.user.token,
                    },
                }).then((resp) => {
                    for (const order of resp) {
                        order.EditDialog = false
                    }
                    orders.value = resp
                }).catch(() => {});
            }
            return {
                orders,
                ...icon,
                deleteOrder,
                OrderPay,
                stores,
                getOrders,
                addOrder,
                addOrderTo,
                EditOrder,
                updateOrder,    
                editOrder,
                radioFee,
                payStatus,
                handleImportError,
                handleImportSuccess,
                myHeaders,
            }
        },
    }
</script>
<style scoped> 

</style>